<template>
  <el-card style="width: 100%">
    <!-- 搜索栏 -->
    <div
      style="
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <el-input
        v-model="keyword"
        placeholder="请输入子系统名称"
        style="width: 300px"
        clearable
        @change="onKeywordChange"
      />
      <el-button type="primary" @click="openAddDialog">新增子系统</el-button>
    </div>

    <!-- 子系统列表表格 -->
    <el-table
      :data="tableData"
      :height="view.height - 290"
      style="width: 100%"
      v-loading="tableLoading"
    >
      <el-table-column prop="name" label="子系统名称" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="createDate" label="创建时间" width="280" />
      <el-table-column prop="updateDate" label="更新时间" width="280" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="openEditDialog(scope.row)"
            >编辑</el-button
          >

          <el-popconfirm
            title="确定要删除当前信息么?"
            @confirm="deleteSubsystem(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 20px; text-align: right">
      <el-pagination
        background
        :current-page="subsystemPagination.page_index"
        :page-size="subsystemPagination.page_size"
        :total="subsystemPagination.page_total"
        layout="prev, pager, next"
        @current-change="onPageChange"
      />
    </div>

    <!-- 新增/编辑子系统弹窗 -->
    <el-dialog :title="dialogTitle" v-model="isDialogVisible" width="500px">
      <el-form :model="formData" :rules="formRules" ref="subsystemForm">
        <el-form-item label="子系统名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="isDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSubsystem">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import HttpService from "@/api/api";

// 动态高度
const view = reactive({
  height: window.innerHeight,
});

// 分页配置
const subsystemPagination = reactive({
  page_index: 1,
  page_size: 30,
  page_total: 0,
});

// 数据
const keyword = ref("");
const tableData = ref([]);
const tableLoading = ref(false);
const isDialogVisible = ref(false);
const dialogTitle = ref("新增子系统");

// 表单数据和校验规则
const formData = reactive({
  id: null,
  name: "",
  description: "",
});

const formRules = reactive({
  name: [{ required: true, message: "请输入子系统名称", trigger: "blur" }],
  description: [{ required: true, message: "请输入描述", trigger: "blur" }],
});

// 获取子系统列表
const getSubsystems = () => {
  const params = {
    limit: subsystemPagination.page_size,
    page: subsystemPagination.page_index,
    search: keyword.value,
  };
  tableLoading.value = true;
  HttpService.subsystemManage.subsystemList(
    params,
    (res) => {
      if (res.status === 200) {
        tableData.value = res.data.data;
        subsystemPagination.page_total = res.data.total;
      } else {
        ElMessage.error("获取子系统列表失败");
      }
      tableLoading.value = false;
    },
    (error) => {
      ElMessage.error("请求失败，请稍后重试");
      tableLoading.value = false;
    }
  );
};

// 分页切换
const onPageChange = (newPage: number) => {
  subsystemPagination.page_index = newPage;
  getSubsystems();
};

// 搜索关键字修改事件
const onKeywordChange = () => {
  subsystemPagination.page_index = 1;
  getSubsystems();
};

// 新增子系统
const openAddDialog = () => {
  dialogTitle.value = "新增子系统";
  formData.id = null;
  formData.name = "";
  formData.description = "";
  isDialogVisible.value = true;
};

// 编辑子系统
const openEditDialog = (row: any) => {
  dialogTitle.value = "编辑子系统";
  formData.id = row.id;
  formData.name = row.name;
  formData.description = row.description;
  isDialogVisible.value = true;
};

// 保存子系统
const saveSubsystem = () => {
  const action = formData.id ? "updateSubsystem" : "addSubsystem";
  const params = { ...formData };
  HttpService.subsystemManage[action](
    params,
    (res) => {
      if (res.status === 200) {
        ElMessage.success(`${formData.id ? "更新" : "新增"}子系统成功`);
        isDialogVisible.value = false;
        getSubsystems();
      } else {
        ElMessage.error(`${formData.id ? "更新" : "新增"}失败`);
      }
    },
    (error) => {
      ElMessage.error("操作失败，请稍后重试");
    }
  );
};

// 删除子系统
const deleteSubsystem = (id: string) => {
  HttpService.subsystemManage.deleteSubsystem(
    { id },
    (res) => {
      if (res.status === 200) {
        ElMessage.success("删除成功");
        getSubsystems();
      } else {
        ElMessage.error("删除失败");
      }
    },
    (error) => {
      ElMessage.error("删除失败，请稍后重试");
    }
  );
};

// 窗口大小监听
const updateViewHeight = () => {
  view.height = window.innerHeight;
};

window.addEventListener("resize", updateViewHeight);

onMounted(() => {
  getSubsystems();
  updateViewHeight();
});
</script>

<style scoped>
/* 样式根据需求自定义 */
</style>
